<template>
  <div class="op-container">
    <hq-searchDown
      ref="hqSearchDown"
      :select-opts="selectOpts"
      @click="handleFilter"
    />
    <div class="filter-container">
      <span v-if="authorityHandle(7)" class="filter-title filter-item"
        >身份所属</span
      >
      <k-select
        lable="身份所属"
        v-if="authorityHandle(7)"
        v-model="listQuery.identityBelong"
        style="width: 100px"
        class="filter-item right-item"
        :select-params="typeList"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <!-- 用户列表 -->
      <k-select
        v-if="false"
        v-model="listQuery.invitationCode"
        style="width: 120px"
        class="filter-item user-item"
        :custom-params="{
          opations: invitationCodeList,
          label: 'lineName',
          value: 'lineId',
        }"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span class="filter-title filter-item">用户状态</span>
      <k-select
        v-model="listQuery.userIdStatus"
        style="width: 100px"
        class="filter-item user-status"
        :select-params="[
          { label: '离线', value: 0 },
          { label: '在线', value: 1 },
        ]"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span class="filter-title filter-item">账号状态</span>
      <k-select
        v-model="listQuery.userStatus"
        style="width: 90px"
        class="filter-item account-status"
        :select-params="dict.type.SETUSER_STATE"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span v-if="authorityHandle(1)" class="filter-title filter-item"
        >通道</span
      >
      <k-select
        v-if="authorityHandle(1)"
        v-model="listQuery.caseProbability"
        style="width: 100px"
        class="filter-item account-status"
        :select-params="dict.type.USER_CHANNEL"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span v-if="authorityHandle(1)" class="filter-title filter-item"
        >通道锁定</span
      >
      <k-select
        v-if="authorityHandle(1)"
        v-model="listQuery.probabilityLockStatus"
        style="width: 100px"
        class="filter-item account-status"
        :select-params="passageList"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span class="filter-title filter-item">注册时间</span>
      <k-date-picker
        v-model="timeValue"
        class="filter-item right-item"
        @hqchang="$refs.hqSearchDown.searchFun()"
      />
      <span class="filter-title filter-item">消费时间</span>
      <k-date-picker
        v-model="timeValueGet"
        class="filter-item"
        @hqchang="$refs.hqSearchDown.searchFun()"
      />
      <div style="display: inline-block">
        <span class="filter-title filter-item">VIP等级</span>
        <k-select
          v-model="listQuery.userLevel"
          style="width: 100px"
          class="filter-item account-status"
          :select-params="VIPGradeList"
          @handleSelectEvent="$refs.hqSearchDown.searchFun()"
        />
      </div>
    </div>
    <!-- openBoxProbSetting -->
    <k-button
      v-if="authorityHandle(460)"
      class="top-btn"
      value="通道设置"
      @click.native="openBoxProbSetting"
    />
    <k-button
      v-if="authorityHandle(460)"
      style="margin: 0 10px"
      class="top-btn"
      value="通道管理"
      @click.native="openBoxSupervise"
    />
    <k-button
      v-if="authorityHandle(460)"
      class="top-btn"
      value="分成配置"
      @click.native="clickSplitConfiguration"
    />

    <div v-if="!authorityHandle(460)" style="margin-top: 40px" />
    <!--表格相关 -->
    <el-table
      :data="listData"
      fit
      border
      highlight-current-row
      style="width: 100%; border-radius: 8px"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
      @sort-change="sortChange"
    >
      <el-table-column min-width="80px" label="头像" align="center">
        <template slot-scope="scope">
          <KImage
            :imagevalue="scope.row.userIcon"
            width-item="50px"
            height-item="50px"
            pathType="1"
          />
        </template>
      </el-table-column>

      <el-table-column
        prop="nickName"
        min-width="100px"
        label="昵称"
        align="center"
      >
        <template slot-scope="scope">
          <div>
            <svg-icon v-show="scope.row.drawWarn === 2" icon-class="warning" />
            {{ scope.row.nickName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="mobile"
        min-width="120px"
        label="绑定手机号"
        align="center"
      />
      <el-table-column
        prop="invitationCode"
        min-width="80px"
        label="邀请码"
        align="center"
      />
      <el-table-column
        prop="belongName"
        min-width="130px"
        label="身份所属"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="totalFlow"
        min-width="130px"
        label="总流水"
        sortable="custom"
        show-overflow-tooltip
        align="center"
      >
        <template slot-scope="scope">
          <div>
            {{ scope.row.totalFlow }}
            <span style="color: #3b425d; cursor: pointer" @click="clickDetail"
              >详情</span
            >
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column
        min-width="100px"
        label="背包价值"
        align="center"
      >
        <el-table-column prop="flRucksackTotal" min-width="80px" label="福利成本" sortable="custom" align="center" />
        <el-table-column prop="zpRucksackTotal" min-width="80px" label="赠品成本" sortable="custom" align="center" />
      </el-table-column> -->
      <el-table-column
        prop="rechargeTotal"
        min-width="100px"
        label="消费总额(R)"
        sortable="custom"
        align="center"
      >
        <template slot-scope="scope">
          <p class="kol-router" @click="routerGoDetail(scope.row.mobile)">
            {{ scope.row.rechargeTotal }}
          </p>
        </template>
      </el-table-column>
      <el-table-column
        v-if="authorityHandle(7)"
        prop="drawTotal"
        min-width="120px"
        label="提取成本总额(R)"
        sortable="custom"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        v-if="authorityHandle(7)"
        prop="drawPercent"
        min-width="120px"
        label="提取百分比"
        sortable="custom"
        show-overflow-tooltip
        align="center"
      >
        <template slot-scope="scope"> {{ scope.row.drawPercent }}% </template>
      </el-table-column>
      <el-table-column
        prop="accountBalance"
        min-width="100px"
        label="积分余额(F)"
        sortable="custom"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="ammoBalance"
        min-width="100px"
        label="晶粹余额(J)"
        sortable="custom"
        show-overflow-tooltip
        align="center"
      />
      <!-- <el-table-column
        prop="accountBalance"
        min-width="60px"
        label="95币余额"
        sortable="custom"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="accountBalanceTwo"
        min-width="100px"
        label="元宝余额"
        sortable="custom"
        show-overflow-tooltip
        align="center"
      /> -->
      <!-- <el-table-column prop="accountBalanceTwo" min-width="80px" label="积分数量" show-overflow-tooltip align="center" /> -->
      <el-table-column
        v-if="authorityHandle(1)"
        prop="caseProbabilityName"
        min-width="100px"
        label="通道"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.caseProbabilityName }}
          <i
            v-if="scope.row.probabilityLockStatus == 2"
            style="color: red"
            class="el-icon-lock"
          />
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        label="VIP等级"
        align="center"
      >
      <template slot-scope="scope">
        <span>
          {{getOptionLabel(scope.row.userLevel,'VIPGradeList')}}
        </span>
      </template>
    </el-table-column>
      <!-- <el-table-column
        prop="assetCardCount"
        min-width="100px"
        sortable="custom"
        label="资产库总数"
        align="center"
      /> -->
      <el-table-column
        prop="userIdStatusName"
        min-width="80px"
        label="用户状态"
        align="center"
      />
      <el-table-column
        prop="userStatusName"
        min-width="80px"
        label="账号状态"
        align="center"
      />
      <el-table-column
        prop="createTime"
        min-width="150px"
        label="注册时间"
        sortable="custom"
        align="center"
      />

      <el-table-column
        v-if="authorityHandle(7)"
        prop="describe"
        min-width="120px"
        label="备注"
        align="center"
      >
        <!-- :toolTipContent="row.describe" -->
        <editable-cell
          v-model="row.describe"
          slot-scope="{ row }"
          :tool-tip-content="
            row.describe ? row.describe : '点击编辑,编辑完成回车'
          "
          :show-input="row.editMode"
          @blur="blurInput(row)"
          @keyup.enter.native="$event.target.blur()"
        >
          <span
            slot="content"
            style="
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            "
            >{{ row.describe }}</span
          >
        </editable-cell>
      </el-table-column>

      <el-table-column
        v-else
        prop="describe"
        min-width="120px"
        label="备注"
        align="center"
      />

      <el-table-column
        min-width="300px"
        label="操作"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <div class="op-div">
            <k-button
              v-if="authorityHandle(263)"
              class="table-btn"
              value="重置头像"
              @click.native="ResetImg(scope.row)"
            />
            <k-button
             :disabled="!authorityHandle(7)"
              class="table-btn"
              value="修改/详情"
              @click.native="userUpdateDialog(scope.row)"
            />
            <k-button
              v-if="authorityHandle(7)"
              class="table-btn"
              :value="scope.row.userStatusInt === 0 ? '正常' : '冻结'"
              @click.native="updateStatus(scope.row)"
            />
            <k-button
             :disabled="!authorityHandle(432)"
              class="table-btn"
              value="合作"
              @click.native="clickCooperate(scope.row)"
            />

            <!-- <k-button
              v-if="authorityHandle([12,13],true)"
              class="table-btn"
              value="开箱定制1"
              @click.native="customSetting(scope.row)"
            /> -->
            <!-- <k-button
              v-if="authorityHandle([12,13],true)"
              class="table-btn"
              value="抽奖定制"
              @click.native="customLottrySetting(scope.row)"
            /> -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="$refs.hqSearchDown.searchFun(1)"
    />
    <!-- 通道设置 弹窗 -->
    <k-dialog
      :show-hide.sync="openboxsetting.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="通道设置"
      class-name="openboxsetting-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="probability"
    >
      <div class="dialog-openboxsetting">
        <el-form label-width="auto">
          <el-form-item label="通道选择：">
            <el-select v-model="probilityModle" placeholder="请选择通道">
              <el-option
                v-for="item in dict.type.USER_CHANNEL"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </k-dialog>
    <!-- 分成配置弹窗 -->
    <k-dialog
      :show-hide.sync="splitConfiguration.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="分成配置"
      class-name="openboxsetting-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="defineConfigure"
    >
      <div class="dialog-openboxsetting">
        <el-input
          v-model="splitConfiguration.extensionPercent"
          placeholder="请输入内容"
        ></el-input
        ><span class="unit">%</span>
      </div>
    </k-dialog>
    <!-- 通道管理 弹框 -->
    <k-dialog
      :show-hide.sync="openProbabilitySuperviseShow"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="通道管理"
      class-name="openboxSupervise-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="saveSupervise"
    >
      <el-radio-group
        v-model="superviseType"
        fill="#3b425d"
        text-color="#ffffff"
        class="top-radio-group"
      >
        <el-radio-button label="percentage">收益百分比设置</el-radio-button>
        <el-radio-button label="allocation">通道配置</el-radio-button>
      </el-radio-group>

      <div class="supervise-container">
        <div v-if="superviseType == 'percentage'" class="percentage_box">
          <p>
            收益百分比=【 提取总额 *
            <el-input
              v-model="percentageData.drawPercent"
              onkeyup="value=value.replace(/[^0-9.]/g,'')"
            />+ 背包总额 *
            <el-input
              v-model="percentageData.rucksackPercent"
              onkeyup="value=value.replace(/[^0-9.]/g,'')"
            />+ 余额总额 *
            <el-input
              v-model="percentageData.balancePercent"
              onkeyup="value=value.replace(/[^0-9.]/g,'')"
            />】/ 消费总额 * 100%
          </p>
        </div>

        <div v-if="superviseType == 'allocation'" class="allocation_box">
          <div class="allocation_main">
            <div class="allocation_left">
              <div class="title">消费区间</div>

              <div class="section_list">
                <div
                  v-for="(item, index) in allocationData"
                  :key="index"
                  class="section_item"
                  :class="{ active: allocationIndex == index }"
                  @click="chooseItem(item, index)"
                >
                  <span>消费区间</span>
                  <el-input v-model="item.minRecharge" />
                  <span>---</span>
                  <el-input v-model="item.maxRecharge" />
                  <i
                    class="el-icon-remove-outline"
                    @click.stop="cutoCationData(index)"
                  />
                </div>
              </div>

              <div class="addItem">
                <i class="el-icon-circle-plus-outline" @click="addCationData" />
              </div>
            </div>

            <div class="allocation_right">
              <div class="title">通道</div>

              <div class="enter_list">
                <div
                  v-for="(item, index) in sonOcationList"
                  :key="index + 1000"
                  class="enter_item"
                >
                  <div class="item">
                    <span>收益百分比</span>
                    <el-input v-model="item.minPercent" />
                    <span>---</span>
                    <el-input v-model="item.maxPercent" />
                    <span>%</span>
                  </div>

                  <div class="item">
                    <span>通道</span>
                    <el-select
                      v-model="item.probabilityId"
                      placeholder="请选择通道"
                    >
                      <el-option label="均分" :value="-1" />
                      <el-option
                        v-for="item in dict.type.USER_CHANNEL"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>

                  <i class="el-icon-remove-outline" @click="cutItem(index)" />
                </div>
              </div>
              <div class="addItem">
                <i class="el-icon-circle-plus-outline" @click="addItem" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </k-dialog>

    <!-- 修改、详情 弹窗 -->
    <k-dialog
      :show-hide.sync="modifyDialog.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="修改/详情"
      :show-foot="false"
      :two-btn="authorityHandle(7)"
      @click="updateUserData"
    >
      <el-form :model="userinfo" label-width="auto" class="form-modify">
        <div class="modify-left">
          <el-form-item label="昵称：">
            <el-input
              v-model="userinfo.nickName"
              :readonly="!authorityHandle(7)"
              placeholder="请输入昵称"
            />
          </el-form-item>
          <el-form-item label="绑定手机号：">
            <el-input
              v-model="userinfo.mobile"
              :readonly="!authorityHandle(7)"
              onkeyup="value=value.replace(/[^0-9.]/g,'')"
              placeholder="请输入手机号"
            />
          </el-form-item>
          <!-- <el-form-item label="用户等级：">
            <el-input
              v-model="userinfo.userLevel"
              :readonly="!authorityHandle(7)"
              onkeyup="value=value.replace(/[^0-9.]/g,'')"
              placeholder="请输入用户等级"
            />
          </el-form-item> -->
          <el-form-item label="绑定邮箱：">
            <el-input
              v-model="userinfo.email"
              :readonly="!authorityHandle(7)"
              placeholder="请输入邮箱"
            />
          </el-form-item>
          <el-form-item label="绑定第三方账号：">
            <el-input
              v-model="userinfo.steamId"
              :readonly="!authorityHandle(7)"
              placeholder="请输入第三方账号"
            />
          </el-form-item>
          <el-form-item label="交易链接：">
            <el-input
              v-model="userinfo.steamUrl"
              :readonly="!authorityHandle(7)"
              placeholder="请输入交易链接"
            />
          </el-form-item>
          <el-form-item label="邀请码：">
            <el-input
              v-model="userinfo.invitationCode"
              :readonly="!authorityHandle(7)"
              placeholder="请输入邀请码"
            />
          </el-form-item>
          <!-- <el-form-item label="用户等级值：">
            <div class="account_balance">
              <el-input
                v-model="userinfo.updateRechargeTotal"
                clearable
                :readonly="!authorityHandle(7)"
                onkeyup="value=value.replace(/[^0-9.]/g,'')"
                placeholder="请输入用户等级值"
              />
              <k-button
                v-if="authorityHandle(7)"
                class="balance_btn"
                value="保存"
                @click.native="submitUserLevel(userinfo.id,userinfo.updateRechargeTotal)"
              />
            </div>
          </el-form-item> -->
        </div>
        <div class="modify-right">
          <el-form-item label="真实姓名：">
            <el-input
              v-model="userinfo.userName"
              :readonly="!authorityHandle(7)"
              placeholder="请输入真实姓名"
            />
          </el-form-item>
          <el-form-item label="身份证号：">
            <el-input
              v-model="userinfo.idNumber"
              :readonly="!authorityHandle(7)"
              placeholder="请输入身份证号"
            />
          </el-form-item>
          <el-form-item label="身份所属：">
            <el-select
              v-model="userinfo.identityBelong"
              :disabled="!authorityHandle(7)"
              placeholder="请选择身份"
            >
              <el-option label="官方" :value="1" />
              <el-option label="主播" :value="2" />
              <el-option label="玩家" :value="3" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="95余额：">
            <div class="account_balance">
              <el-input
                v-model="userinfo.accountBalance"
                :readonly="!authorityHandle(7)"
                onkeyup="value=value.replace(/[^0-9.]/g,'')"
                placeholder="请输入数值"
              />
              <k-button
                v-if="authorityHandle(7)"
                class="balance_btn"
                value="保存"
                @click.native="saveAccountBalance(1)"
              />
            </div>
          </el-form-item>
          <el-form-item label="晶粹数量：">
            <div class="account_balance">
              <el-input
                v-model="userinfo.ammoBalance"
                :readonly="!authorityHandle(7)"
                onkeyup="value=value.replace(/[^0-9.]/g,'')"
                placeholder="请输入数值"
              />
              <k-button
                v-if="authorityHandle(7)"
                class="balance_btn"
                value="保存"
                @click.native="saveAccountBalance(2)"
              />
            </div>
          </el-form-item>
          <el-form-item label="元宝数量：">
            <div class="account_balance">
              <el-input
                v-model="userinfo.accountBalanceTwo"
                :readonly="!authorityHandle(7)"
                onkeyup="value=value.replace(/[^0-9.]/g,'')"
                placeholder="请输入数值"
              />
              <k-button
                v-if="authorityHandle(7)"
                class="balance_btn"
                value="保存"
                @click.native="saveAccountBalance(3)"
              />
            </div>
          </el-form-item> -->
          <el-form-item v-if="authorityHandle(1)" label="通道：">
            <el-select
              v-model="userinfo.caseProbability"
              :disabled="userinfo.probabilityLockStatus == 2"
              placeholder="请选择通道"
            >
              <el-option
                v-for="item in dict.type.USER_CHANNEL"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <k-button
              :value="splitConfiguration.lockStatus == 1&&userinfo.probabilityLockStatus==1 ? '锁定' : '取消锁定'"
              @click.native="clickLock"
            />
          </el-form-item>
          <el-form-item label="自己邀请码：" prop="owninvitecode">
            <el-input
              v-model="userinfo.ownerInvitation"
              :readonly="!authorityHandle(7)"
              placeholder="请输入邀请码"
            />
          </el-form-item>
          <el-form-item v-if="authorityHandle(1)" label="VIP等级">
            <el-select
              v-model="userinfo.userLevel"
              disabled
              placeholder="请选择"
            >
              <el-option
                v-for="item in VIPGradeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
    </k-dialog>
    <!-- 开箱定制 删除 弹窗 -->
    <!-- <k-dialog
      :show-hide.sync="customSettingDialog"
      :modal-append-to-body="false"
      :append-to-body="true"
      class="setting_dialog"
      title="开箱定制"
      :two-btn="authorityHandle(12)"
      @click="saveSettingDialog"
    >

      <div class="dialog-warningSetting">
        <ul>
          <li v-for="(customItem, index) in boxCustomModelList" :key="index">
            <span class="warning-title">卡包名称: </span>
            <el-select
              v-model="customItem.boxId"
              :disabled="!authorityHandle(12)"
              filterable
              placeholder="请选择"
              @change="boxSelectChange($event,index,true)"
            >
              <el-option v-for="item in boxResultList" :key="item.lineId" :label="item.lineName" :value="item.lineId" />
            </el-select>
            <span class="warning-title"> 定制赠品: </span>
            <el-select v-model="customItem.goodsId" :disabled="!authorityHandle(12)" clearable placeholder="请选择">
              <el-option
                v-for="item in customItem.goodsList"
                :key="item.lineId"
                :label="item.lineName"
                :value="item.lineId"
              />
            </el-select>
            <span class="warning-title"> 开箱次数: </span>
            <el-input v-model.number="customItem.needCount" :readonly="!authorityHandle(12)" class="price-input" />

            <el-switch
              v-model="customItem.status"
              :disabled="!authorityHandle(12)"
              style="margin-left:10px"
              active-color="#3b425d"
              inactive-color="#E9EBF2"
              :active-value="1"
              :inactive-value="2"
            />
            <i
              v-if="authorityHandle(12)"
              v-show="index != 0"
              class="el-icon-remove"
              @click="removeAiItem(customItem.boxId,index)"
            />
            <i
              v-if="authorityHandle(12)"
              v-show="index === boxCustomModelList.length-1"
              class="el-icon-circle-plus"
              @click="addAiItem(index)"
            />
          </li>
        </ul>
      </div>
    </k-dialog> -->
    <!-- 开箱定制 弹窗 -->
    <!-- <k-dialog
      :show-hide.sync="customLottrySettingDialog"
      :modal-append-to-body="false"
      :append-to-body="true"
      class="setting_dialog"
      title="开箱定制"
      :two-btn="authorityHandle(12)"
      @click="savePrizeSettingDialog"
    >

      <div class="dialog-warningSetting">
        <ul>
          <li v-for="(customItem, index) in prizeModelResultList" :key="index">
            <span class="warning-title"> 定制礼品: </span>
            <el-select v-model="customItem.prizeId" :disabled="!authorityHandle(12)" clearable placeholder="请选择">
              <el-option
                v-for="item in prizeResultList"
                :key="item.lineId"
                :label="item.lineName"
                :value="item.lineId"
              />
            </el-select>
            <span class="warning-title"> 抽奖次数: </span>
            <el-input v-model.number="customItem.needCount" :readonly="!authorityHandle(12)" class="price-input" />

            <el-switch
              v-model="customItem.status"
              :disabled="!authorityHandle(12)"
              style="margin-left:10px"
              active-color="#3b425d"
              inactive-color="#E9EBF2"
              :active-value="1"
              :inactive-value="2"
            />
            <i v-if="authorityHandle(12)" v-show="index != 0" class="el-icon-remove" @click="removePrizeItem(index)" />
            <i
              v-if="authorityHandle(12)"
              v-show="index === prizeModelResultList.length-1"
              class="el-icon-circle-plus"
              @click="addPrizeItem(index)"
            />
          </li>
        </ul>
      </div>
    </k-dialog> -->
  </div>
</template>

<script>
import {
  getBoxList,
  getGoodsListByBoxId,
  getBoxSetting,
  setBoxSetting,
  listUserData,
  update,
  updateUserAccountBalanceTwo,
  updateStatus,
  getByIdentityBelong,
  probability,
  setDescribe,
  getProfitConfig,
  setProfitConfig,
  getProbabilityConfig,
  setProbabilityConfig,
  updateProbabilityLockStatus,
  updateUserToFission
} from "@/api/user/user";
import {
  getAllPrize,
  getTaskBoxSetting,
  setTaskBoxSetting,
} from "@/api/task/index";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import EditableCell from "@/components/EditableCell";
// import selectorMes from '@/config/selectorMes' // 配置文件
import hqSearchDown from "@/components/hqSearchDown"; // 下拉搜索
import { getExtensionSetting, setExtensionSetting } from "@/api/data/data";
import vipDataList from '@/views/mixins/data'
export default {
  props: {
    handleClick: {
      type: Function,
    },
  },
  mixins:[vipDataList],
  components: { Pagination, EditableCell, hqSearchDown },
  dicts: ["USER_CHANNEL", "SETUSER_STATE", "SETUSER_LEVEL"],
  data() {
    return {
      // 下拉搜索项0
      selectOpts: [
        {
          label: "昵称",
          value: "nickName",
        },
        {
          label: "用户账号",
          rigth: true,
          value: "mobile",
        },
        {
          label: "所属主播",
          value: "belongName",
        },
        {
          label: "交易链接",
          value: "steamUrl",
        },
        {
          label: "玩家邀请码",
          value: "invitationCode",
        },
        {
          label: "备注",
          value: "describe",
        },
      ],
      vipGrade: [
        {
          label: "vip1",
          value: "1",
        },
        {
          label: "vip2",
          value: "2",
        },
        {
          label: "vip3",
          value: "3",
        },
      ],
      // 下拉搜索项1
      typeList: [
        { label: "官方", value: 1 },
        { label: "主播", value: 2 },
        { label: "玩家", value: 3 },
      ],
      passageList: [
        { label: "已锁定", value: 2 },
        { label: "未锁定", value: 1 },
      ],
      currUserId: undefined,
      listData: [],
      boxResultList: [],
      prizeResultList: [],
      prizeModelResultList: [
        {
          id: undefined, // 卡包id',
          userId: undefined, // 用户id',
          prizeId: undefined, // 赠品id',
          needCount: undefined, // 需要开箱的次数',
          status: 1, // 开关 1开|2关'
        },
      ],
      boxCustomModelList: [
        {
          boxId: undefined, // 卡包id',
          userId: undefined, // 用户id',
          goodsId: undefined, // 赠品id',
          goodsList: [],
          needCount: undefined, // 需要开箱的次数',
          status: 1, // 开关 1开|2关'
        },
      ],
      invitationCodeList: [],
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: "",
          start: "",
        },
        probabilityLockStatus: undefined, // 概率锁定
        sort: "", // 排序字段 为对应列名,
        direction: "", // 排序 正向(asc)逆向(desc),
        roleId: 2, // 用户角色",
        identityBelong: undefined, // 身份所属",
        nickName: undefined, // 昵称",
        userIdStatus: undefined, // 在线状态",
        userStatus: "", // 账号状态",
        probabilityId: "", // 概率",
        startTime: "", // 开始时间",
        endTime: "", // 结束时间",
        dataStartTime: "", // 开始时间",
        dataEndTime: "", // 结束时间",
        anchorId: undefined, // 主播id",
        robotStatus: undefined, // AI状态",
        robotExeStatus: undefined, // AI执行状态",
        caseName: "", // 开箱名称",
        caseProbability: undefined, // 通道种类"
        invitationCode: "", // 邀请"
        key: "", // 赠品名称'
      },
      probilityModle: undefined,
      userinfo: {
        id: undefined,
        nickName: "",
        mobile: "",
        userLevel: "",
        email: "",
        steamId: "",
        steamUrl: "",
        invitationCode: "",
        userName: "",
        idNumber: "",
        identityBelong: "",
        accountBalance: "",
        ammoBalance: "",
        accountBalanceTwo: "",
        caseProbability: undefined,
        ownerInvitation: "",
        probabilityLockStatus: undefined,
        updateRechargeTotal: undefined,
      },
      timeValue: "",
      timeValueGet: "",
      identityBelong: "",
      openboxsetting: {
        showHide: false,
      },
      modifyDialog: {
        showHide: false,
      },
      splitConfiguration: {
        showHide: false,
        extensionPercent: "",
        lockStatus: false,
      },
      currentPageNo: 1,
      customSettingDialog: false,
      customLottrySettingDialog: false,

      openProbabilitySuperviseShow: false,
      superviseType: "percentage",
      percentageData: {
        balancePercent: undefined,
        drawPercent: undefined,
        rucksackPercent: undefined,
      },
      allocationData: [],
      sonOcationList: [],
      paramData: {},
      allocationIndex: -1,
      unpackProbability: [
        {
          value: 1,
          label: "A",
        },
        {
          value: 3,
          label: "C",
        },
        {
          value: 4,
          label: "D",
        },
        {
          value: 5,
          label: "E",
        },
        {
          value: 7,
          label: "G",
        },
      ],
    };
  },
  watch: {
    identityBelong(val) {
      this.$log(val);
      this.listQuery.identityBelong = this.identityBelong;
      if (val) {
        // this.getByIdentityBelong(val)
    }
    },
    // 时间赋值
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null;
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null;
    },
    timeValueGet(val) {
      this.listQuery.dataStartTime = this.timeValueGet
        ? this.timeValueGet[0]
        : null;
      this.listQuery.dataEndTime = this.timeValueGet
        ? this.timeValueGet[1]
        : null;
    },
    '$route':{
      deep: true,
      handler(val){
        this.loadData();
      }
    }
  },
  created() {
    if (this.authorityHandle(9, 10, 11, false)) {
      // this.typeList = [{ label: "主播", value: 2 }];
    }
    this.loadData();
  },
  beforeDestroy() {
    localStorage.setItem("pagination", "1");
  },
  methods: {
    // 推广结算记录
    clickDetail() {
      this.$router.push({
        path: "/rootdatamanager/userbehavior-data/settlementRecords/settlementRecords",
      });
    },
    // 通道锁定
    clickLock() {
      updateProbabilityLockStatus({
        id: this.userinfo.id,
        caseProbability: this.userinfo.caseProbability,
      }).then((res) => {
        if (res.data.success) {
          if (this.splitConfiguration.lockStatus == 1) {
            this.splitConfiguration.lockStatus = 2;
          } else if (this.splitConfiguration.lockStatus == 2) {
            this.splitConfiguration.lockStatus = 1;
          }
          this.loadData();
          this.modifyDialog.showHide = false
        }
      });
    },
    // 通道管理弹框打开
    openBoxSupervise() {
      getProfitConfig().then((res) => {
        this.percentageData = res.data;
        getProbabilityConfig().then((res) => {
          this.allocationData = res.data;
          this.sonOcationList = this.allocationData[0].itemList;
          this.allocationIndex = 0;
          this.openProbabilitySuperviseShow = true;
        });
      });
    },

    // 选择单个
    chooseItem(item, index) {
      this.allocationIndex = index;
      this.sonOcationList = this.allocationData[index].itemList;
    },

    // 删除单个
    cutoCationData(index) {
      this.allocationData.splice(index, 1);
      if (index == 0 || index == this.allocationIndex) {
        this.allocationIndex = -1;
        this.sonOcationList = [];
      }
    },

    // 新增
    addCationData() {
      this.allocationData.push({
        itemList: [],
        maxRecharge: "",
        minRecharge: "",
      });
    },

    // 删除item
    cutItem(index) {
      this.sonOcationList.splice(index, 1);
    },

    // 新增
    addItem() {
      this.sonOcationList.push({
        probabilityId: "",
        minPercent: "",
        maxPercent: "",
      });
    },
    // 分成配置保存
    defineConfigure() {
      if (!this.splitConfiguration.extensionPercent)
        return this.$message.error("请输入!");
      let data = {
        extensionPercent: this.splitConfiguration.extensionPercent,
        extensionBoxId: -1,
        passiveExtensionBoxId: -1,
      };
      setExtensionSetting(data).then((res) => {
        this.$message.success("保存成功");
        this.splitConfiguration.showHide = false;
        this.$resetForm(this.extensionSettingModle);
      });
    },
    // 通道管理保存
    saveSupervise() {
      if (this.superviseType == "percentage") {
        // 收益百分比设置
        const data = {
          balancePercent: this.percentageData.balancePercent,
          drawPercent: this.percentageData.drawPercent,
          rucksackPercent: this.percentageData.rucksackPercent,
        };
        setProfitConfig(data).then((res) => {
          this.$message.success("保存成功");
          this.openProbabilitySuperviseShow = false;
        });
      } else {
        if (!this.dataVerification()) {
          this.$message.error("所有选项必填!");
          return;
        }

        // 通道配置
        setProbabilityConfig(this.allocationData).then((res) => {
          this.$message.success("保存成功");
          this.openProbabilitySuperviseShow = false;
        });
      }
    },

    // 数据验证
    dataVerification() {
      let status = true;

      for (let i = 0; i < this.allocationData.length; i++) {
        const itemData = this.allocationData[i];
        if (itemData.minRecharge == null || itemData.maxRecharge == null) {
          status = false;
          continue;
        }
        if (
          String(itemData.minRecharge) == "" ||
          String(itemData.maxRecharge) == ""
        ) {
          status = false;
          continue;
        }

        for (let k = 0; k < itemData.itemList.length; k++) {
          const item = itemData.itemList[k];
          if (
            item.minPercent == null ||
            item.maxPercent == null ||
            item.probabilityId == null
          ) {
            status = false;
            continue;
          }
          if (
            String(item.minPercent) == "" ||
            String(item.maxPercent) == "" ||
            String(item.probabilityId) == ""
          ) {
            status = false;
            continue;
          }
        }
      }

      return status;
    },

    routerGoDetail(userMobile) {
      this.$router.push({
        name: "Playerpay",
        params: { userMobile: userMobile },
      });
    },
    sortChange(column, prop, order) {
      this.listQuery.sort = column.prop;
      if (column.order === "ascending") {
        this.listQuery.direction = "asc";
      } else if (column.order === "descending") {
        this.listQuery.direction = "desc";
      }
      this.$refs.hqSearchDown.searchFun();
    },
    /**
     * 搜索时间
     */
    loadData(v) {
      listUserData({ ...this.listQuery, ...v }).then((res) => {
        const data = res.data;
        this.totalRows = data.totalRows;
        if (data.rows) {
          this.listData = data.rows.map((row) => {
            return {
              ...row,
              editMode: false,
            };
          });
        } else {
          this.listData = [];
        }
      });
    },
    // 设置通道
    probability() {
      if (this.probilityModle === null || this.probilityModle === undefined) {
        this.$message.error("请选择概率");
        return;
      }
      probability({ roleId: 2, probability: this.probilityModle }).then(
        (res) => {
          if (res.data.success) {
            this.$message.success("操作成功");
            this.openboxsetting.showHide = false;
            this.$refs.hqSearchDown.searchFun();
          } else {
            this.$message.error(res.data.msg);
          }
        }
      );
    },
    // 查询身份所属
    getByIdentityBelong(id) {
      getByIdentityBelong({ identityBelong: id }).then((res) => {
        this.$log(res);
        if (res.data.data) {
          this.invitationCodeList = res.data.data;
        }
      });
    },
    // 单独更新余额
    saveAccountBalance(flag) {
      if (flag == 3) {
        updateUserAccountBalanceTwo({
          id: this.userinfo.id,
          accountBalanceTwo: this.userinfo.accountBalanceTwo,
        }).then((res) => {
          if (res.data.success) {
            this.$refs.hqSearchDown.searchFun(1);
            this.$message.success("操作成功");
            // this.modifyDialog.showHide = false
          } else {
            this.$message.error(res.data.msg);
          }
        });
        return;
      }
      let userAccout = {};
      switch (flag) {
        case 1:
          userAccout = {
            id: this.userinfo.id,
            accountBalance: this.userinfo.accountBalance,
          };
          break;
        case 2:
          userAccout = {
            id: this.userinfo.id,
            ammoBalance: this.userinfo.ammoBalance,
          };
          break;
      }
      update(userAccout).then((res) => {
        if (res.data.success) {
          this.$refs.hqSearchDown.searchFun(1);
          this.$message.success("操作成功");
          // this.modifyDialog.showHide = false
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // userinfo.updateRechargeTotal
    // 保存等级
    async submitUserLevel(id, updateRechargeTotal) {
      updateRechargeTotal = updateRechargeTotal || 0;
      await update({ id, updateRechargeTotal });
      this.$message.success("操作成功");
      this.$refs.hqSearchDown.searchFun(1);
    },
    // 重置头像
    ResetImg(row) {
      const Param = { ...row };
      Param.userIcon =
        "https://95-csgo.oss-cn-beijing.aliyuncs.com/file/2021-04-21/userIcon.png";
      delete Param.updateRechargeTotal;
      delete Param.accountBalance;
      delete Param.ammoBalance;
      delete Param.accountBalanceTwo;
      this.$confirm(`确定要重置用户【${Param.nickName}】的头像吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          update(Param).then((res) => {
            this.$log(res);
            if (res.data.success) {
              this.$refs.hqSearchDown.searchFun(1);
              this.$message.success("操作成功");
              this.modifyDialog.showHide = false;
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 修改用户信息
    updateUserData() {
      const Param = { ...this.userinfo };
      delete Param.updateRechargeTotal;
      delete Param.accountBalance;
      delete Param.ammoBalance;
      delete Param.accountBalanceTwo;

      update(Param).then((res) => {
        this.$log(res);
        if (res.data.success) {
          this.$refs.hqSearchDown.searchFun(1);
          this.$message.success("操作成功");
          this.modifyDialog.showHide = false;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },

    // 搜索查询事件
    handleFilter(v, type) {
      if (type !== 1) this.listQuery.pager.pageNo = 1;
      else localStorage.setItem("pagination", this.listQuery.pager.pageNo);
      this.loadData(v);
    },
    openBoxProbSetting() {
      this.openboxsetting.showHide = true;
    },
    // 分成配置
    async clickSplitConfiguration() {
      getExtensionSetting().then((res) => {
        this.splitConfiguration.extensionPercent = res.data.extensionPercent;
      });
      this.splitConfiguration.showHide = true;
    },
    // 修改账号状态
    updateStatus(row) {
      let tip = "是否冻结此账号?";
      if (row.userStatusInt === 0) {
        tip = "是否解冻此账号?";
      }
      this.$confirm(tip, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateStatus({
            userId: row.id,
            userStatus: row.userStatusInt === 0 ? 1 : 0,
          }).then((res) => {
            this.$log(res);
            if (res.data.success) {
              this.$refs.hqSearchDown.searchFun(1);
              this.$message.success("操作成功");
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    userUpdateDialog(row) {
      this.userinfo.id = row.id;
      this.userinfo.nickName = row.nickName;
      this.userinfo.mobile = row.mobile;
      this.userinfo.userLevel = row.userLevel
      this.userinfo.email = row.email;
      this.userinfo.steamId = row.steamId;
      this.userinfo.steamUrl = row.steamUrl;
      this.userinfo.invitationCode = row.invitationCode;
      this.userinfo.userName = row.userName;
      this.userinfo.idNumber = row.idNumber;
      this.userinfo.identityBelong = row.identityBelong;
      this.userinfo.accountBalance = row.accountBalance;
      this.userinfo.ammoBalance = row.ammoBalance;
      this.userinfo.accountBalanceTwo = row.accountBalanceTwo;
      this.userinfo.caseProbability = Number(row.caseProbability);
      this.userinfo.ownerInvitation = row.ownerInvitation;
      this.userinfo.probabilityLockStatus = row.probabilityLockStatus;
      this.userinfo.updateRechargeTotal = row.updateRechargeTotal;
      this.modifyDialog.showHide = true;
      this.splitConfiguration.lockStatus = row.lockStatus;
    },
    // 合作
    clickCooperate(row) {
      this.$confirm(`确认将【${row.nickName}】转为合作用户吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          updateUserToFission({userId:row.id}).then((result) => {
            if(result.status === 200)this.$message.success("成功"); this.handleClick({ name: "Bkoluser" });
         });
        })
        .catch(() => {});
    },
    // 卡包选择
    boxSelectChange(value, index, flag) {
      if (flag) {
        this.boxCustomModelList[index].goodsId = undefined;
      }
      getGoodsListByBoxId({ boxId: value }).then((res) => {
        this.boxCustomModelList[index].goodsList = res.data;
        this.$forceUpdate();
      });
    },

    savePrizeSettingDialog() {
      const is = this.prizeModelResultList.some((item) => {
        return (
          item.prizeId === null ||
          item.prizeId === undefined ||
          item.prizeId === ""
        );
      });
      const needCount = this.prizeModelResultList.some((item) => {
        return item.needCount === null || item.needCount === undefined;
      });
      if (is || needCount) {
        this.$message.error("数据有误");
        return;
      }
      this.prizeModelResultList.map((item) => {
        item.userId = this.currUserId;
      });
      // this.$log(this.boxCustomModelList)
      setTaskBoxSetting(this.prizeModelResultList).then((res) => {
        this.$message.success("保存成功");
        this.customLottrySettingDialog = false;
      });
    },
    saveSettingDialog() {
      const is = this.boxCustomModelList.some((item) => {
        return (
          item.goodsId === null ||
          item.goodsId === undefined ||
          item.goodsId === ""
        );
      });
      const needCount = this.boxCustomModelList.some((item) => {
        return item.needCount === null || item.needCount === undefined;
      });
      if (is || needCount) {
        this.$message.error("数据有误");
        return;
      }
      this.boxCustomModelList.map((item) => {
        item.userId = this.currUserId;
      });
      // this.$log(this.boxCustomModelList)
      setBoxSetting(this.boxCustomModelList).then((res) => {
        this.$message.success("保存成功");
        this.customSettingDialog = false;
      });
    },
    customSetting(row) {
      this.currUserId = row.id;
      getBoxSetting({ userId: this.currUserId }).then((res) => {
        this.boxCustomModelList = res.data;
        this.customSettingDialog = true;
      });
      getBoxList().then((res) => {
        this.boxResultList = res.data;
      });
    },
    customLottrySetting(row) {
      this.currUserId = row.id;
      getTaskBoxSetting({ userId: this.currUserId }).then((res) => {
        this.prizeModelResultList = res.data;
        this.customLottrySettingDialog = true;
      });
      getAllPrize().then((res) => {
        this.prizeResultList = res.data;
      });
    },
    removeAiItem(value) {
      const index = this.boxCustomModelList.findIndex(function (item) {
        return item.boxId === value;
      });
      if (index !== -1) {
        this.boxCustomModelList.splice(index, 1);
      }
    },
    addAiItem() {
      this.boxCustomModelList.push({
        boxId: undefined, // 卡包id',
        userId: undefined, // 用户id',
        goodsId: undefined, // 赠品id',
        needCount: undefined, // 需要开箱的次数',
        status: 1, // 开关 1开|2关'
      });
    },
    removePrizeItem(index) {
      if (index !== -1) {
        this.prizeModelResultList.splice(index, 1);
      }
    },
    addPrizeItem() {
      this.prizeModelResultList.push({
        id: undefined, // 卡包id',
        userId: undefined, // 用户id',
        prizeId: undefined, // 赠品id',
        needCount: undefined, // 需要开箱的次数',
        status: 1, // 开关 1开|2关'
      });
    },

    blurInput(row) {
      this.modifyItemNote(row);
    },
    // 修改备注
    modifyItemNote(row) {
      // if (!row.describe) return
      setDescribe({ id: row.id, describe: row.describe }).then((res) => {
        if (res.data.success) {
          this.$message.success("备注成功");
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
$menuText: #14162e; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调

.op-container {
  margin: 20px;
}

.filter-container {
  width: 100%;
  line-height: 48px;
  position: relative;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .right-item {
    margin-right: 10px;
  }

  .hqinpnt {
    // position: absolute;
    // right: 10px;
  }

  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 6px;
    color: #14162e;
  }

  .user-item {
    margin-left: 10px;
    margin-right: 20px;
  }

  .user-status,
  .account-status {
    margin-right: 20px;
  }
}

.top-btn {
  margin: 30px 0px 30px 0px;
  font-size: 14px;
  color: #ffffff;
}

.balance_btn {
  margin: 0px 10px;
  font-size: 14px;
  color: #ffffff;
}

.account_balance {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.top-radio-group {
  margin-bottom: 40px;
  transform: translateY(-20px);
}

::v-deep .el-radio-button__inner {
  &:hover {
    color: $mainColor;
  }
}

.supervise-container {
  min-width: 1320px;
  min-height: 300px;

  .percentage_box {
    width: 100%;
    height: 100%;
    overflow: hidden;

    p {
      text-align: center;
      font-size: 16px;
      margin-top: 40px;
    }

    .el-input {
      width: 80px;
      margin: 0 6px;
    }
  }

  .allocation_box {
    width: 100%;
    text-align: center;
    transform: translateY(-20px);
    padding: 0 20px;
    box-sizing: border-box;

    .allocation_main {
      display: flex;
      justify-content: space-between;

      .title {
        font-size: 20px;
        text-align: center;
        margin-bottom: 20px;
      }

      .allocation_left {
        height: 100%;
        width: 600px;
        border-right: 2px solid #606266;
        padding-right: 50px;
        box-sizing: border-box;

        .section_list {
          .section_item {
            display: flex;
            align-items: center;
            padding: 10px 20px;
            box-sizing: border-box;
            border: 1px solid transparent;
            border-radius: 6px;
            cursor: pointer;

            span {
              font-size: 16px;
            }

            .el-input {
              width: 140px;
              margin: 0 20px;
            }

            i {
              font-size: 18px;
              cursor: pointer;
            }

            &.active {
              border-color: rgb(54, 181, 139);
            }
          }
        }

        .addItem {
          text-align: center;
          margin-top: 20px;

          i {
            font-size: 22px;
            color: rgb(54, 181, 139);
            cursor: pointer;
          }
        }
      }

      .allocation_right {
        height: 100%;
        width: 640px;

        .enter_list {
          .enter_item {
            display: flex;
            align-items: center;
            margin-bottom: 20px;

            span {
              font-size: 16px;
            }

            .el-input {
              width: 120px;
              margin: 0 6px;
            }

            .item {
              margin: 0 10px;

              .el-select {
                width: 120px;
                margin: 0 6px;
              }
            }

            i {
              font-size: 18px;
              cursor: pointer;
            }
          }
        }

        .addItem {
          text-align: center;
          margin-top: 20px;

          i {
            font-size: 22px;
            color: rgb(54, 181, 139);
            cursor: pointer;
          }
        }
      }
    }

    li {
      list-style: none;
      display: block;
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .allocation_item {
        margin-right: 30px;

        ::v-deep input::-webkit-outer-spin-button,
        ::v-deep input::-webkit-inner-spin-button {
          -webkit-appearance: none;
        }

        ::v-deep input[type="number"] {
          -moz-appearance: textfield;
        }
      }

      .el-input {
        width: 80px;
        margin: 0 6px;
      }

      .el-select {
        width: 124px;
        margin-left: 6px;
      }

      .el-icon {
        &-circle-plus,
        &-remove {
          font-size: 22px;
          color: #3b425d;
          margin-left: 10px;
        }
      }
    }
  }
}

.kSelect .el-select .el-input .el-input__inner {
  width: 124px;
}

::v-deep .el-select .el-input.is-focus .el-input__inner {
  border-color: $mainColor;
}

::v-deep .el-input__inner:focus {
  border-color: $mainColor;
}

.el-form-item__label-wrap .el-form-item__label {
  float: none;
}

.dialog-openboxsetting {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 80px 80px;
  .unit {
    font-size: 24px;
    display: flex;
    align-items: center;
  }
}

.form-modify {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 10px 80px;

  .modify-right {
    margin-left: 80px;
  }
}

.dialog-warningSetting {
  ::v-deep.el-input {
    width: 150px;
  }

  .price-input {
    width: 110px;
  }

  .el-icon {
    &-circle-plus,
    &-remove {
      font-size: 22px;
      color: #3b425d;
      margin-left: 10px;
    }
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

    li {
      margin: 0 0 30px 0px;
      display: flex;
      flex-direction: row;
      align-items: center;

      .warning-title {
        font-size: 16px;
        color: $menuText;
        margin-right: 10px;
        margin-left: 20px;
      }

      i {
        color: #d1d5dd;
      }
    }
  }
}

.kol-router {
  color: #3b425d;
  font-size: 14px;
}

.avatardiv {
  width: 50px;
  height: 50px;
  position: relative;

  .image1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
  }

  .image2 {
    z-index: 10;
  }
}
</style>
